<template>
	<!-- <wd-config-provider :theme-vars="themeVars"> -->
		<view>
			<!-- <theme-box> -->
				<!-- <wd-tabbar v-model="tabbar" shape="round" fixed bordered safeAreaInsetBottom placeholder>
					<wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>
					<wd-tabbar-item title="分类" icon="cart"></wd-tabbar-item>
					<wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>
				</wd-tabbar> -->
				<wd-card title="经营分析" style="margin-top: 14px">
					<view class="title">一般的，检举内容由承办的党的委员会或纪律检查委员会将处理意见或复议、复查结论同申诉人见面，听取其意见。复议、复查的结论和决定，应交给申诉人一份。</view>
					<template #footer>
						<wd-button size="small" plain>查看详情</wd-button>
					</template>
				</wd-card>
				<wd-card title="经营分析" style="margin-top: 640px">
				<wd-segmented :options="list" :value="current" :vibrate-short="true"></wd-segmented>
				<wd-table :data="tableDataList" height="400"  :index="{ align: 'center', width: 60 , fixed: true}">
					<wd-table-col prop="name" label="姓名"></wd-table-col>
					<wd-table-col prop="school" label="求学之所" sortable width="300"></wd-table-col>
					<wd-table-col prop="major" label="专业"></wd-table-col>
					<wd-table-col prop="major" label="专业"></wd-table-col>
					<wd-table-col prop="major" label="专业"></wd-table-col>
					<wd-table-col prop="major" label="专业"></wd-table-col>
					<wd-table-col prop="major" label="专业"></wd-table-col>
					<wd-table-col prop="major" label="专业"></wd-table-col>
					<wd-table-col prop="major" label="专业"></wd-table-col>
					<wd-table-col prop="major" label="专业"></wd-table-col>
				</wd-table>
				<view class="card"></view>
				<view>www</view>
					<view>www</view>
					<view>www</view>
					<wd-button type="info" plain loading>主要按钮</wd-button>
					<wd-button>主要按钮</wd-button>
					<wd-button type="success">成功按钮</wd-button>
					<wd-button type="info">信息按钮</wd-button>
					<wd-button type="warning">警告按钮</wd-button>
					<wd-button type="error"  loading>危险按钮</wd-button>
					
					<wd-checkbox v-model="value" @change="handleChange" size="large">单选框1</wd-checkbox>
					<wd-toast />
					<wd-button @click="showToast">toast</wd-button>
					<wd-button plain @click="actionShow = true">弹出菜单</wd-button>
					<wd-action-sheet :safe-area-inset-bottom="true" v-model="actionShow" :actions="actions" @select="select"></wd-action-sheet>
					<wd-calendar type="date" label="日期检验" v-model="dateValue" :before-confirm="beforeConfirm" />
				</wd-card>
			<!-- </theme-box> -->
		</view>
	</template>
	
	<script>
		import { ref, reactive } from 'vue'
		import { useToast, useNotify } from '@/uni_modules/wot-design-uni'
		const { showNotify, closeNotify } = useNotify()
		export default {
			setup() {
				const tabbar = ref(1)
				const value = ref(true)
				const actionShow = ref(false)
				const dateValue = ref(null)
				const actions = reactive([
					{
						name: '选项1'
					}, {
						name: '选项2'
					}, {
						name: '选项3',
						subname: '描述信息'
					}
				])
				const toast = useToast()
				showNotify('通知内容')
				const handleChange = () => {
	
				}
				const select  = (item, index) => {
					toast.success(`当前选中项: ${item.name}, 下标: ${index}`)
				}
				function showToast() {
					// toast.loading('提示信息')
					toast.loading({
						msg: '加载中加载中加载中加载中加载中加载中加载中...'
					})
				}
	
				// 日期
				const beforeConfirm = ({ value, resolve }) => {
					if (value > Date.now()) {
						toast.error('该日期暂无数据，请选择今天或今天之前的日期')
						resolve(false)
					} else {
						resolve(true)
					}
				}
				
				// 分段器
				const list = ref(['评论', '点赞', '贡献', '打赏'])
				const current = ref('点赞')
				const tableDataList = ref([
					{
						name: '娃哈哈',
						school: '莲华晴雯莲华晴雯莲华晴雯1',
						major: '砍人'
					},
					{
						name: '娃哈哈',
						school: '莲华晴雯莲华晴雯莲华晴雯2',
						major: '砍人'
					},
					{
						name: '娃哈哈',
						school: '莲华晴雯莲华晴雯莲华晴雯4',
						major: '砍人'
					},
					{
						name: '娃哈哈',
						school: '莲华晴雯莲华晴雯莲华晴雯6',
						major: '砍人'
					},
					{
						name: '娃哈哈',
						school: '莲华晴雯莲华晴雯莲华晴雯3',
						major: '砍人'
					},
					{
						name: '娃哈哈',
						school: '莲华晴雯莲华晴雯莲华晴雯2',
						major: '砍人'
					},
					{
						name: '娃哈哈',
						school: '莲华晴雯莲华晴雯莲华晴雯9',
						major: '砍人'
					}
				])
				return {
					tabbar,
					value,
					actionShow,
					actions,
					handleChange,
					select,
					beforeConfirm,
					dateValue,
					showToast,
					list,
					current,
					tableDataList
				}
			},
		}
	</script>
	
	<style lang="scss">
		.card {
			z-index: 10;
			width: 300px;
			height: 500px;
			background: linear-gradient(
			to top right,
			rgba(90, 149, 207, 0.5),
			rgba(58, 76, 99, 0.8)
			);
			// box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2),
			// -10px 10px 20px rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(6px); /*  元素后面区域添加模糊效果 */
			border-radius: 20px;
	}
	 @import '@/static/css/index.scss';
		.content {
			padding-top: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.wd-button{
			margin-bottom: 10px;
		}
		.logo {
			height: 200rpx;
			width: 200rpx;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}
	
		.text-area {
			display: flex;
			justify-content: center;
		}
	
		.title {
			font-size: 14px;
			color: $toSun-text-color;
		}
		.wot-theme-dark{
			.title{
				color: $toNight-text-color;
			}
		}
	</style>
	